<template>
  <div class="company-detail-container">
    <div class="company-detail-header">
      <el-avatar :src="companyDetail?.logo" :size="62" shape="square" />
      <div
        style="
          margin-left: 12px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        "
      >
        <p style="font-size: 24px; font-weight: bold">
          {{ companyDetail?.name }}
        </p>
        <div>
          <el-tag style="margin-right: 8px; font-size: 14px">
            {{ companyDetail?.location }}
          </el-tag>
          <el-tag style="margin-right: 8px; font-size: 14px">
            {{ companyDetail?.industryName }}
          </el-tag>
          <el-tag style="margin-right: 8px; font-size: 14px">
            {{
              handleFinancingStage(
                companyDetail?.financingStage
                  ? companyDetail?.financingStage
                  : 0,
              )
            }}
          </el-tag>
          <el-tag style="margin-right: 8px; font-size: 14px">
            {{ handleScala(companyDetail?.scala ? companyDetail?.scala : 0) }}
          </el-tag>
        </div>
      </div>
    </div>
    <div style="padding: 12px 15% 0">
      <el-tag
        type="info"
        style="margin-right: 8px; font-size: 16px"
        v-for="item in companyDetail?.otherTag"
      >
        {{ item }}
      </el-tag>
    </div>
    <div style="padding: 36px 15% 0">
      <p style="font-size: 18px; font-weight: bold; padding-bottom: 16px">
        简介
      </p>
      <v-md-preview :text="companyDetail?.introduction"></v-md-preview>
    </div>
    <div style="padding: 36px 15% 0">
      <p style="font-size: 18px; font-weight: bold">工商信息</p>
      <el-descriptions size="large" style="padding: 28px 42px">
        <el-descriptions-item label="公司名称">
          {{ companyDetail?.businessInformationVo.name }}
        </el-descriptions-item>
        <el-descriptions-item label="成立时间">
          {{ companyDetail?.businessInformationVo.establishmentTime }}
        </el-descriptions-item>
        <el-descriptions-item label="注册资金">
          {{ companyDetail?.businessInformationVo.registeredCapital }}万元
        </el-descriptions-item>
        <el-descriptions-item label="法人代表">
          {{ companyDetail?.businessInformationVo.legalRepresentative }}
        </el-descriptions-item>
        <el-descriptions-item label="注册地址">
          {{ companyDetail?.businessInformationVo.registeredLocation }}
        </el-descriptions-item>
        <el-descriptions-item label="统一信用代码">
          {{ companyDetail?.businessInformationVo.code }}
        </el-descriptions-item>
        <el-descriptions-item label="所属行业">
          {{ companyDetail?.businessInformationVo.industry }}
        </el-descriptions-item>
        <el-descriptions-item label="所在地">
          {{ companyDetail?.businessInformationVo.location }}
        </el-descriptions-item>
        <el-descriptions-item label="登记机关">
          {{ companyDetail?.businessInformationVo.registrationAuthority }}
        </el-descriptions-item>
        <el-descriptions-item label="营业期限">
          {{ companyDetail?.businessInformationVo.businessTerm }}
        </el-descriptions-item>
        <el-descriptions-item label="企业类型">
          {{ companyDetail?.businessInformationVo.type }}
        </el-descriptions-item>
        <el-descriptions-item label="经营状态">
          {{
            handleCompanyStatus(
              companyDetail?.businessInformationVo.status
                ? companyDetail?.businessInformationVo.status
                : 0,
            )
          }}
        </el-descriptions-item>
        <el-descriptions-item label="经营范围">
          {{ companyDetail?.businessInformationVo.scope }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="padding: 8px 15% 0">
      <p style="font-size: 18px; font-weight: bold">相关职位</p>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          align-content: flex-start;
        "
      >
        <div
          v-for="item in jobDatas"
          @click="$router.push('/hr/info/job/' + item.id)"
          class="job-item"
        >
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              width: 78%;
            "
          >
            <div>
              <el-text type="success" size="large">{{ item.name }}</el-text>
              <el-text type="danger" size="large" style="margin-left: 12px">
                {{ item.minSalary }}-{{ item.maxSalary }}K
              </el-text>
            </div>
            <div style="margin: 0px 4px">
              <el-tag type="info" style="margin-right: 8px">
                {{ item.tagName }}
              </el-tag>
              <el-tag type="info" style="margin-right: 8px">
                {{ item.location }}
              </el-tag>
              <el-tag type="info" style="margin-right: 8px">
                {{ handleEducationEnum(item.eduction) }}
              </el-tag>
              <el-tag type="info" style="margin-right: 8px">
                {{ handleExperienceEnum(item.experience) }}
              </el-tag>
              <el-tag type="info" style="margin-right: 8px">
                {{ handleJobType(item.type) }}
              </el-tag>
            </div>
          </div>
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 78px;
            "
          >
            <el-avatar :src="item.jorHrInfoVo.avatar" :size="42" />
            <div class="job-item-hr">
              <p style="padding: 4px 0">{{ item.jorHrInfoVo.realname }}</p>
              <el-text type="info">{{ item.jorHrInfoVo.job }}</el-text>
            </div>
            <el-button
              :disabled="judgeHr()"
              type="warning"
              round
              class="job-item-button"
              @click="gotoChat(item)"
            >
              聊一聊
            </el-button>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: center; padding-bottom: 24px">
        <el-pagination
          v-model:current-page="pageQuery.pageNum"
          :page-size="pageQuery.pageSize"
          background
          layout="total, prev, pager, next"
          :total="jobTotal"
          @size-change="getJobInfoPageByCompanyId(currentCompanyId, pageQuery)"
          @current-change="
            getJobInfoPageByCompanyId(currentCompanyId, pageQuery)
          "
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqGetCompanyInfoById } from '@/api/company'
import { CompanyType } from '@/api/company/type'
import { reqGetJobInfoPageByCompanyId } from '@/api/job'
import { BasePageQuery, JobType } from '@/api/job/type'
import {
  handleScala,
  handleFinancingStage,
  handleCompanyStatus,
  handleEducationEnum,
  handleExperienceEnum,
  handleJobType,
} from '@/constant/type'
import { ElMessage } from 'element-plus'
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'

onMounted(() => {
  getCompanyDetailById(currentCompanyId.value)
  getJobInfoPageByCompanyId(currentCompanyId.value, pageQuery.value)
  judgeHr()
})

const userStore = useUserStore()
const router = useRouter()
const companyDetail = ref<CompanyType>()
const loading = ref(false)
const route = useRoute()
const jobDatas = ref<JobType[]>()
const jobTotal = ref(0)
const pageQuery = ref<BasePageQuery>({
  pageNum: 1,
  pageSize: 10,
})

const judgeHr = () => {
  if (userStore.isHr === 1) {
    console.log('hr身份')
    return true
  }
  console.log('求职者身份')
  return false
}

const currentCompanyId = computed(() => {
  if (route.params.id) {
    return parseInt(route.params.id as string)
  } else {
    return 0
  }
})

const getCompanyDetailById = async (id: number) => {
  try {
    loading.value = true
    const { data } = await reqGetCompanyInfoById(id)
    companyDetail.value = data.data
  } catch (e) {
    ElMessage.error((e as Error).message)
  } finally {
    loading.value = false
  }
}

const getJobInfoPageByCompanyId = async (
  id: number,
  pageQuery: BasePageQuery,
) => {
  try {
    loading.value = true
    const { data } = await reqGetJobInfoPageByCompanyId(id, pageQuery)
    jobDatas.value = data.data.list
    jobTotal.value = data.data.total
  } catch (e) {
    ElMessage.error((e as Error).message)
  } finally {
    loading.value = false
  }
}

const gotoChat = (jobInfo: JobType) => {
  sessionStorage.setItem('jobInfo', JSON.stringify(jobInfo))
  router.push({
    path: '/chat',
    query: {
      jId: jobInfo.id,
    },
  })
}
</script>
<style scoped lang="scss">
.company-detail-container {
  max-width: 100vw;
  min-width: 1200px;
  height: 100%;

  .company-detail-header {
    display: flex;
    padding: 36px 15% 0;
  }

  .job-item {
    width: 46%;
    height: 128px;
    margin: 8px;
    padding: 12px;
    border-radius: 12px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    cursor: pointer;

    .job-item-button {
      display: none;
    }

    .job-item-hr {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .job-item:hover {
    .job-item-button {
      margin-top: 6px;
      display: block;
    }

    .job-item-hr {
      display: none;
    }
  }
}
</style>
